<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="40%"
    top="13vh"
    :before-close="closeHandle"
    :close-on-click-modal="false"
    class="params-view-dialog"
  >

    <el-input v-for="(value, key, index) in params" :key="'p' + index" :value="value" class="width98percent mb10">
      <template slot="prepend">{{ key }}</template>
    </el-input>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "task-params-view-dialog",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        // 弹出框标题
        dialogTitle: '',
        // 导出任务请求参数对象
        params: {}
      }
    },
    methods: {
      /**
       * 初始化参数对象方法
       * @param {string} dialogTitle 弹出框标题
       * @param {string} params      参数对象（json数据格式）
       */
      initParams(dialogTitle, params) {
        this.dialogTitle = dialogTitle
        this.params = JSON.parse(params)
      },
      /**
       * 弹出框关闭处理事件
       */
      closeHandle() {
        this.dialogTitle = ''
        this.params = {}

        // 向上传递事件
        this.$emit('close-params-view-dialog')
      },
    }
  }
</script>

<style scoped>
  .params-view-dialog .width98percent {
    width: 98%;
  }
  .params-view-dialog .mb10 {
    margin-bottom: 10px;
  }
</style>
